<template>
    <div id="Bar" :style="{height:height}" :xAxisData="xAxisData" :legendData="legendData"
         :seriesData="seriesData" :title="title">
    </div>
</template>
<script>
    import {on, off} from './tools'

    // const xAxisData = ['2012', '2013', '2014', '2015', '2016'];
    // const seriesData = [
    //     {
    //         name: 'Forest',
    //         type: 'bar',
    //         data: [320, 332, 301, 334, 390]
    //     },
    //     {
    //         name: 'Steppe',
    //         type: 'bar',
    //         data: [220, 182, 191, 234, 290]
    //     },
    // ];
    // const legendData = ['Forest', 'Steppe'];

    export default {
        name: 'Bar',
        props: {
            height: {
                type: String,
                default: "254px"
            },
            xAxisData: Array,
            seriesData: Array,
            legendData: Array,
            title: String
        },
        data() {
            return {
                msg: '',
                chart: null,
                width: "100%",
                option: {
                    color: ["#84bafd",
                        "#6ad9e6",
                        "#ffb980",
                        "#59678c",
                        "#9a7fd1",
                        "#97b552",
                        "#588dd5",
                        "#fb6260"],
                    tooltip: {
                        trigger: 'axis',
                        // formatter: "{a} <br/>{b}: {c} ({d}%)",
                        position: function (p) { //其中p为当前鼠标的位置
                            return [p[0] + 10, p[1] - 10];
                        },
                        axisPointer: {
                            type: 'shadow'
                        },
                        extraCssText: 'width:auto;'
                    },
                    grid: {
                        top: 35,
                        left: 55,
                        right: 45,
                        width: 'auto',
                        height: 'auto'
                    },
                    title: {
                        subtext: '',
                        left: 'center',
                        text: ''
                    },
                    xAxis: {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0
                        },
                        data: []
                    },
                    legend: {
                        data: [],
                        left: 'right',
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: []
                }
            }
        },
        // mounted() {
        //     this.$nextTick(() => {
        //         this.drawLine();
        //
        //     })
        // },
        beforeDestroy() {
            off(window, 'resize', this.resize)
        },
        methods: {
            resize() {
                this.chart.resize()
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('Bar'))
                this.chart = myChart;
                // 绘制图表
                this.option.xAxis.data = this.xAxisData;
                this.option.series = this.seriesData;
                this.option.legend.data = this.legendData;
                this.option.title.text = this.title;
                myChart.setOption(this.option);
                on(window, 'resize', this.resize)
            },

        }
    }

</script>
<style>
    #Bar div {
        width: 100%;
    }
</style>
